<?php

require dirname(__DIR__) . "/vendor/autoload.php";

use Kmin\Template;
// 实例化模板引擎
$tpl = new Template([
    "view_path" => __DIR__ . "/../component/",
    "cache_path" => __DIR__ . "/../runtime/",
]);
?>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="../vendor/kmin/template/src/assets/kmin.js"></script>
    <link rel="stylesheet" href="../component/kmin-ui.css">
</head>

<body>
    <km-dark>
        <span slot="km-content">dark mode</span>
    </km-dark>
    <km-demo></km-demo>
    <script type="module">
        // 内容
        <?php echo $tpl->fetch("table"); ?>
    </script>
    <script type="module">
        // 内容
        <?php echo $tpl->fetch("dark"); ?>
    </script>
    <script type="module">
        customElements.define('km-demo', class extends KMin {

            constructor() {
                super();
                this.event = new Event(this); // 事件派发
                this.data = {
                    tableHead: [
                        ["id", "name", "age"]
                    ],
                    tableLists: [
                        ["1", "张三", "18"],
                        ["2", "李四", "20"],
                        ["3", "王五", "22"],
                    ]
                }
            }

            render() {
                return `
                <div class="km-demo" style="margin: 20px;">
                    <km-table header='${JSON.stringify(this.data.tableHead)}' lists='${JSON.stringify(this.data.tableLists)}'></km-table>
                </div>`
            }
        })
    </script>
</body>

</html>